<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">留言本</h1>
    </header>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   	.mui-bar-nav{
   		background-color: white;
   	}
	#liuyan1{
		position: absolute;
		right: 1vw;
		color: #C8C8C8;
	}
	.mui-table-view{
		margin-left: 10px;
		margin-right: 10px;
	}
	.mui-table-view li{
		height: 100px;
	}
	.time{
		position: relative;
		left: 195px;
		bottom: 40px;
	}
	.zhuye-btn{
		position: relative;left: 205px;
		bottom: 35px;
	}
	.mui-ellipsis{
		width: 200px;
	}
	#xiaoxi div h3{
		margin-top: 150px;
		text-align: center;
	}
	#wode div{
		text-align: center;
		margin-top: 150px;
	}
	#liuyan{
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
   </style>
</head>
<body>
	<div class="mui-content" id="zhuye">
		
				<div class="mui-control-content mui-active" id="home">
					<!--公告-->
					<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<h3>最新公告:</h3>
							<p style="color: #333; text-indent: 2em;">内容内容内容内容内容内容内容内容内容内容内容内容。</p>
							<p style="position: relative; left: 285px;">时间</p>
						</div>
					</div>
					</div>
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户1
				                <p class="mui-ellipsis">留言本怎么做?</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn" id="huifu">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户2
				                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				</ul>
				</div>
		
		
		<div class="mui-control-content" id="liuyan">
				    <header class="mui-bar mui-bar-nav">
				    <button type="button" class="mui-btn mui-btn-outlined" id="liuyan1">发布</button>
				    <h1 class="mui-title">发布留言</h1>
				</header>
				<form action="" class="mui-input-group">
					<div class="mui-input-row">
						<input type="text" class="mui-input-clear" placeholder="请输入标题" />
					</div>
					<textarea name="" rows="3" cols="20" placeholder="请输入内容"></textarea>
				</form>
		</div>
		
		
		<div class="mui-control-content" id="xiaoxi">
			<div class="mui-content">
			    <h3>请先登录!</h3>
			</div>
		</div>
		
		
		<div class="mui-control-content" id="wode">
			<div class="mui-content">
			    <h4>还没登陆？快去登陆吧！</h4>
			<br />
			<button type="button" class="mui-btn" id="login">登陆</button>
			<button type="button" class="mui-btn" id="reg">注册</button>
			</div>
		</div>
	</div>
</body>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">主页</span>
    </a>
    <a class="mui-tab-item" href="#liuyan">
        <span class="mui-icon mui-icon-chatbubble"></span>
        <span class="mui-tab-label">留言</span>
    </a>
    <a class="mui-tab-item" href="#xiaoxi">
        <span class="mui-icon mui-icon-chat"></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="#wode">
        <span class="mui-icon mui-icon-person"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<script type="text/javascript">
	document.getElementById('login').addEventListener('tap', function() {
  		mui.openWindow({
   			url: 'login.html',
    		id:'login.html'
  				});
		});
		document.getElementById('reg').addEventListener('tap', function() {
  		mui.openWindow({
   			url: 'reg.html',
    		id:'reg.html'
  				});
		});
		document.getElementById('huifu').addEventListener('tap', function() {
  		mui.alert('请先登录','提示',function(){});
		});
		document.getElementById('liuyan1').addEventListener('tap', function() {
  		mui.alert('请先登录','提示',function(){});
		});
	/*mui.init({
			subpages:[
			{
			  url:'index.html',
		      id:'index.html',
		      styles:{
		        
		      }
			},
			{
			  url:'login.html',
		      id:'login.html',
		      styles:{
		       
		      }
			},
			{
			  url:'reg.html',
		      id:'reg.html',
		      styles:{
		        
		      }
			}
			],
		})
	var login = document.getElementById("login");
	var reg = document.getElementById("reg");
	var huifu = document.getElementById("huifu");
	var liuyan1 = document.getElementById("liuyan1");
	setTimeout(function(){
		var indexpage=plus.webview.getWebviewById("index.html");
		var loginpage=plus.webview.getWebviewById("login.html");
		var regpage=plus.webview.getWebviewById("reg.html");
		plus.webview.show("index.html");
		plus.webview.hide("login.html");
		plus.webview.hide("reg.html");
	},500)
	login.addEventListener('tap',function(){
		var indexpage=plus.webview.getWebviewById("index.html");
		var loginpage=plus.webview.getWebviewById("login.html");
		var regpage=plus.webview.getWebviewById("reg.html");
		plus.webview.hide("index.html");
		plus.webview.show("login.html");
		plus.webview.hide("reg.html");
	})
	reg.addEventListener('tap',function(){
		var indexpage=plus.webview.getWebviewById("index.html");
		var loginpage=plus.webview.getWebviewById("login.html");
		var regpage=plus.webview.getWebviewById("reg.html");
		plus.webview.hide("index.html");
		plus.webview.hide("login.html");
		plus.webview.show("reg.html");
	})
	liuyan1.addEventListener('tap',function(){
		var indexpage=plus.webview.getWebviewById("index.html");
		var loginpage=plus.webview.getWebviewById("login.html");
		var regpage=plus.webview.getWebviewById("reg.html");
		plus.webview.show("index.html");
		plus.webview.hide("login.html");
		plus.webview.hide("reg.html");
	})
	*/
</script>
</html>